<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1716040613-史兵舰</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <!-- 导入去除标签自带样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 导入样式 -->
    <link rel="stylesheet" href="./css/info.css">
    <!-- 导入js样式 -->
    <script src="./js/info.js"></script>
</head>
<body>
    <!-- 快速导航栏 -->
    <div class="shortcut">
        <div class="shoercut-nav w">
                <ul>
                    <li><a href="index.html">小米商城</a></li>
                    <li>|</li>
                    <li><a href="#">MUI</a></li>
                    <li>|</li>
                    <li><a href="#">米聊</a></li>
                    <li>|</li>
                    <li><a href="#">游戏</a></li>
                    <li>|</li>
                    <li><a href="#">云服务</a></li>
                    <li>|</li>
                    <li><a href="#">金融</a></li>
                    <li>|</li>
                    <li><a href="#">问题反馈</a></li>
                </ul>
                <span><a href="#">购物车</a></span>
                <ul>
                    <li><a href="login.html">登录</a></li>
                    <li>|</li>
                    <li><a href="register.html">注册</a></li>
                    <li>|</li>
                    <li><a href="#">消息通知</a></li>
                </ul>    
        </div>
    </div>
    <!-- 导航栏 + 搜索框 -->
    <div class="container w">
        <div class="logo-top">
            <a href="#"><img src="./images/logo_top.png" alt=""></a>
        </div>
        <div class="yiyuan">
            <a href="#"><img src="./images/yiyuan.png" alt=""></a>
        </div>
        <ul>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">红米手机</a></li>
            <li><a href="#">智能电视</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">智能家电</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">智能硬件</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
        </ul>
        <div class="header-search">
            <input type="text" placeholder="小米9 小米MIX现货" >
            <button>搜索</button>
        </div>
    </div>
    <!-- 标题 -->
    <div class="title">
        <div class="title-info w">
            <span>小米9</span>
            <ul>
                <li><a href="#">概述</a></li>
                <li>|</li>
                <li><a href="#">变焦双摄</a></li>
                <li>|</li>
                <li><a href="#">设计</a></li>
                <li>|</li>
                <li><a href="#">参数</a></li>
                <li>|</li>
                <li><a href="#">F码通道</a></li>
                <li>|</li>
                <li><a href="#">用户评价</a></li>
                
            </ul>
        </div>
    </div>
    <!-- 内容 -->
    <div class="row w">
        <div class="row-left">
            <img src="./images/liebiao_xiaomi9.jpg" alt="">
            <div class="mask"></div>
            <div class="big">
                <img src="./images/liebiao_xiaomi9_big.jpg" alt="" class="bigImg">
            </div>
        </div>
        <div class="row-right">
            <h1>小米9</h1>
            <p>
                全曲面轻薄设计，全息幻彩玻璃机身1骁龙855旗舰处理器1 20W无线闪充，标配27W有线快
                充/索尼4800万超广角微距三摄1极速屏下指纹解锁/多功能NFC
            </p>
            <h2>2999.00元</h2>
            <h3>选择版本</h3>
            <span>● 全网通版6GB+64GB 2499元</span>
            <span>⚪全网通版6GB+128GB 3499元</span>
            <h3>选择颜色</h3>
            <span>⚪&nbsp;&nbsp;全息幻彩紫</span>
            <span>●&nbsp;&nbsp;全息幻彩绿</span>
            <div class="price">
                <div class="price-left">小米9全网通版6GB内存64GB全息幻彩绿</div>
                <div class="price-right">2499.00元</div>
                <h4>总计：2499元</h4>
            </div>
            <button>立即选购</button>            
            <button>加入购物车</button>            
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="footer-info w">
            <ul>
                <li><a href="#">小米商城</a></li>
                <li>|</li>
                <li><a href="#">小米网盟</a></li>
                <li>|</li>
                <li><a href="#">小米移动</a></li>
                <li>|</li>
                <li><a href="#">隐私政策</a></li>
            </ul>
        </div>
    </div>
    <div class="footer-bd">
        <span>史兵舰 @ 版权所有 2020</span>
    </div>
</body>
</html>